<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        浏览器使用
            + 下载或获取vue的核心库
                * vue3  npm install vue
                * vue2  npm install vue@版本号

                * 插件分类
                    - vue.d.ts vue js 脚本typescript语法映射描述文件
                    - 带有 .prod  => 生成版本[代码压缩过的版本]
                    - 带有 .global => 常规浏览器脚本语法,script src 的使用方式
                    - 带有 .esm-browser => 浏览器ES6模块语法使用方式
                    - 带有 .esm-bundler => 其他ES6模块环境中使用的
                    - 带有 .runtime => 删除vue模板渲染代码的环境脚本
                                => .runtime.global 浏览器中使用，但不带模板渲染语法
                                => .runtime.esm-browser 浏览器ES6模块中使用，但不带模板渲染语法
                                => .runtime.esm-bundler 其他ES6模块环境中使用的，不带模板渲染语法
                    - 带有 .cjs => vue 在 node 模块环境下使用的拆分文件

            + 加载vue的核心语法库
                * 常规引入  
                    <script src="../assets/vue3/vue.global.js"></script>
                * ES 模块化引入
                    import { createApp } from "../assets/vue3/vue.esm-browser.js";
     -->
    <!-- <script src="../assets/vue3/vue.global.js"></script>
    <script>
        window.onload = function(){
            const app = Vue.createApp({
                data:function(){
                    return {
                        msg:"测试数据"
                    }
                },
                methods:{
                    showTip:function(){
                        alert(this.msg)
                    }
                }
            });
            app.mount("#app")
        }
    </script> -->
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";

        // createApp(options Api)  启动和构建vue项目运行的环境【支持vue对应语法解析的环境】
        //      options = {} , 用于为开发提供自定义的环境数据描述
        //      return 构建具有vue运行环境功能的 应用对象 ，一般开发中被定义成app变量或不定义
        //      返回的应用对象内置 mount(el) 方法 , el - element select,通过指定的页面el元素完成和vue应用的关联
        //      mount 方法完成应用挂载后，会返回一个vue的操作实例对象【程序运行时为页面提供数据功能的实例对象】,该对象一般被名为vm
        
        // 页面模板语法：内置取值，循环，判断，事件操作，样式操作等相关页面标签的定义规则
        //       + 插值表达式
        //       + vue指令
        // 功能定义语法：提供对环境功能扩展的定义规则，页面数据的定义，回调方法的定义，工具函数定义，代码执行时间的控制
        //       + vue环境构建时的相关配置 
        window.onload = function () {
            const app = createApp({
                // data属性用于为构建的应用程序提供页面关联后的数据支持
                //     属性取值为 工厂函数，用于构建独立的数据复用对象
                data: function () {
                    return {
                        // 用于定义vue项目中页面需要使用的相关变量数据
                        msg: "测试数据"
                    }
                    // return [1,2,3,4,5];
                },
                // methods属性用于为构建的应用程序提供页面关联后的方法支持
                //        属性取值 Object，对象中以key描述属性名，属性值为function
                //        methods 中定义方法在vue环境构建时会锁定方法中this指向【call,bind,applay】
                //                在vue环境下这些方法中的this指向于关联后的vue实例对象
                //                在这些方法中，通过this是可以直接方法绑定后vue实例的相关数据或属性的
                //                所以methods的一层定义的方法只能是普通函数，不能是箭头函数
                methods: {
                    // showTip: function () {
                    //     console.log(this)
                    //     alert(this.msg)
                    // },
                    // showTip: ()=>{
                    //     console.log(this)
                    //     alert(this.msg)
                    // },
                    // ES6 属性定义缩写方式 => 函数取值的缩写指的是普通函数而非箭头函数
                    showTip(){
                        console.log(this)
                        alert(this.msg)
                    }
                    // printFun:"aaa"
                }
            });
            console.log(app)
            let vm = app.mount("#app");
            console.log(vm)
        }
    </script>
</head>

<body>
    <div id="app">
        <!-- {{  }} 插值表达式 - 从vue环境的数据仓库中取值 -->
        <h5>{{ msg }}</h5>
        <!-- <h5>{{ info }}</h5> -->
        <!--
            v-名称 vue指令 - 从vue环境的数据仓库中取值，并执行指令已经定义的功能 
            v-model 被执行时会完成 input 事件的绑定，完成了 value 的取值绑定
        -->
        <input type="text" v-model="msg">
        <br><br>
        <!-- v-on 事件指令 - 从vue环境的方法仓库中取值回调函数，完成对应事件的绑定操作 -->
        <input type="button" value="弹框" v-on:click="showTip()">
    </div>
    <!-- <hr>
    <div id="app">
        <h5>{{ msg }}</h5>
        <input type="text" v-model="msg">
        <br><br>
        <input type="button" value="弹框" v-on:click="showTip()">
    </div> -->
</body>

</html>